<template>
<view class="userbox">
	<text class="title">我的</text>
<!-- 头部个人信息 不变-->
<view class="userHeader">
  <view class="nav">
      <view class="user" @click="onLogin">
        <image :src="userdata.headimgurl" v-if="userdata.headimgurl"></image>
		<image src="../../static/imgs/user.jpg" v-else></image>
        <text class="nickname">{{userdata.nick_name || '登录'}}</text>
		<text class="level_name ">{{userdata.level_info.name}}</text>
      </view>
  </view>
  <!-- 我的账户 -->
  <my-account :balance="userdata.money_goods" :integral="userdata.integral" :colors="colors"></my-account>
  <!-- <view class="fz24 c-28 tac p-t-10 p-b-10 mb-30 notice" @click="showVip()">
	  会员期间，累计消费<text class="c-fe">￥23549</text>，为您节省<text class="c-fe">￥23423</text>
	  <text class="more"> ></text>
  </view> -->
<!--  <view class="vip-account margin-30" style="background: #eeeeee;">
	  <view class=" df-ac vip-account-item wrap gray p-10" @click="goRouter('/pagePoint/user/myteam')">
	  	<view class=" df-cc column">
	  		<image src="../../static/tabbar/tuandui.png" mode="" class="vip-account-item-img p-10"></image>
	  	</view>
		<view class="vip-account-title p-10" >我的团队</view>
	  </view>
	  
	  <view class=" df-ac vip-account-item wrap gray p-10">
	  	<view class=" df-cc column">
	  		<image src="../../static/tabbar/shouyi.png" mode="" class="vip-account-item-img p-10"></image>
	  	</view>
	  		<view class="vip-account-title p-10" >我的收益</view>
	  </view>
  </view> -->
</view>
  <view class="vip">
	<view class="vipname">
	  <text class="iconfont icon-zuanshi zuanshi"></text>
	  <text class="names">
		{{userdata.nick_name}} 兰密会员
	  </text>
	  <text class="vip_level">成为VIP</text>
	</view>
	<view class="banquan">
	  <view class="nav df wrap gray">
	  	<view class="nav-item df-cc column" v-for="item in nav" :key="item.id">
	  		<image :src="item.icon" mode="" class="mb-10"></image>
	  	</view>
	  </view>
	</view>
</view>

<view class="page-my page">
	<view class="p-30 order-container " style="border-bottom: solid 1px #e1e1e1;">
		<view class="fz45 gr c-666 mb-50">我的服务</view>
		<view class="df wrap">
			<view class="order-tab df-cc column mb-40" style="flex:0 0 25%;" v-for="item in serveList" :key="item.id" @click="handleClick(item)">
				<image :src="item.icon" mode="" class="icon-serve"></image>
				<view class="fz24 c-28">{{item.name}}</view>
			</view>
		</view>
	</view>
	<view class=" p-30 order-container mb-50"  style="border-bottom: solid 1px #e1e1e1;">
		<view class="fsb df-ac mb-40">
			<view class="fz45 gr c-666 mb-40">我的订单</view>
			<view class="fz24 c-28 df-ac" @click="goRouter('/pagePoint/order/orderList',{status:0})">
				查看全部订单 
				<image src="../../static/imgs/arr-r.png" mode="" style="width: 20rpx;height: 20rpx;" class="ml-10"></image></view>
		</view>
		<view class="df">
			<view class="order-tab df-cc column" @click="goRouter('/pagePoint/user/mycollection')">
				<image src="../../static/user/order_collect.png" mode="" class="icon-tab"></image>
				<view class="fz24 c-28">收藏</view>
			</view>
			<view class="order-tab df-cc column" v-for="item in list" :key="item.id" @click="goRouter('/pagePoint/order/orderList',{status:item.id})">
				<image :src="item.icon" mode="" class="icon-tab"></image>
				<view class="fz24 c-28">{{item.name}}</view>
			</view>
		</view>
	</view>
</view>
		
<pageFooter></pageFooter>
</view>
</template>

<script>
let app = getApp();
import { getConfig, getUserInfo,getToken } from '@/utils/auth';
import myAccount from "../../components/user/my-account";
import listCell from "../../components/user/list-cell";

export default {
  data() {
    return {
      colors: '',
      startY: 0,
      //原始坐标
      moving: false,
      //当前元素的状态（是否移动）
      coverTransform: 'translateY(0px)',
      //元素的移动
      coverTransition: '0s',
      oldcolor: '',
      userdata: {
		  
	  },
	  integral_set:[],//积分配置
	  nav:[
	  	{id:1,name:'皇冠',icon:require('../../static/user/hg.png')},
	  	{id:2,name:'权益',icon:require('../../static/user/quanyi.png')},
	  	{id:3,name:'保障',icon:require('../../static/user/baozhang.png')},
	  	{id:4,name:'质量',icon:require('../../static/user/zhiliang.png')}
	  ],
	  list:[
	  	//{id:2,name:'收藏',icon:require('../../static/user/order_collect.png')},
	  	{id:2,name:'待支付',icon:require('../../static/user/order_dfk.png')},
	  	{id:3,name:'待发货',icon:require('../../static/user/order_fahuo.png')},
	  	{id:11,name:'已完成',icon:require('../../static/user/order_shouhuo.png')},
	  ],
	  serveList:[
	  	{id:1,name:'消费记录',icon:require('../../static/user/service_xiaofei.png'),url:'/pagePoint/order/orderList'},
	  	{id:2,name:'项目明细',icon:require('../../static/user/service_xiangmu.png'),url:'/pagePoint/my/xiaohao'},
	  	{id:3,name:'地址管理',icon:require('../../static/user/service_address.png'),url:'/pagePoint/user/myaddress'},
	  	{id:4,name:'售后客服',icon:require('../../static/user/service_shouhou.png'),url:'/pages/faq/kefu'},
	  ]
    };
  },

  components: {
    myAccount,
    listCell,
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let colors = "#999";
    let oldcolor = this.colors;
    let userdata = getUserInfo() || {};
    this.setData({
      colors: colors,
      //userdata: userdata
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  created() {
  	this.init();
  },
  methods: {
	  async init() {
	  	var query = {
	  		type:'index',
	  	};
	  	 let res = await this.$api.memberData(query).then(res=> {
	  		 console.log("首页详情")
	  			console.log(res)
	  			if(res.code == 0){
	  				this.userdata = res.data.user;
	  			}
	  			
	  	 }).catch(err=> { console.log(err) } );
		

				
	  },
	  handleClick(data){
		  //点击事件
		  uni.navigateTo({
		  	'url':data.url
		  })
	  },
	  showVip(){
		  uni.showModal({
		      title: 'Hi,' + this.$data.userdata.nickName,
		      content: '自2021年10月13日成为会员,用会元专享购买 2 次，会员期间累计为您节省￥ 12680 ',
		      success: function (res) {
		          if (res.confirm) {
		              console.log('用户点击确定');
		          } else if (res.cancel) {
		              console.log('用户点击取消');
		          }
		      }
		  })
	  },
	onLogin(){
		let token = getToken()
		if(getToken()){
			return
		}
		uni.navigateTo({
			url:'../../login/login'
		})
	},
    coverTouchStart(e) {
      //滑动开始 记录目标原始坐标
      this.setData({
        startY: e.touches[0].clientY,
        coverTransition: 'transform .2s linear'
      });
    },
	moveHandle(){ //阻止下拉默认事件
		
	},
    coverTouchMove(e) {
      //滑动中
      let moveY = e.touches[0].clientY; //记录移动的坐标
      let startY = this.startY;
      let moveDistance = moveY - startY; //计算当前坐标与原始坐标的差
      if (moveDistance < 0) {
        //如果小于0 不做操作
        this.setData({
          moving: false
        });
        return;
      }
      this.setData({
        moving: true
      });

      if (moveDistance >= 60) {
        //如果差在该区间内
        moveDistance = 60;
      }

      if (moveDistance > 0 && moveDistance <= 60) {
        this.setData({
          coverTransform: `translateY(${moveDistance}px)`
        });
      }
    },

    coverTouchEnd(e) {
      //滑动结束 回到原始位置
      if (this.moving == false) {
        return;
      }
      this.setData({
        coverTransform: 'translateY(0px)',
        moving: false,
        coverTransition: 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)'
      });
    },
  }
};
</script>
<style lang="scss">
	.page {
	    background-color: #fff !important;
	    width: 100vw;
	    height: 75vh;
	    /* padding-top: 64px; */
		}
		.vip-account{
			border-radius: 10rpx;
		}
		.vip-account-item{
			display: inline-flex;
			width: 50%;
		}
		.vip-account-item-img{
			width: 40rpx;
			height: 40rpx;
		}
uni-page-body, uni-page-refresh,.userbox{
		background-color: #F9F9F9;
	}
	.userbox .title{
		padding: 4px 4%;
		height: 50px;
		font-size: 20px;
		position: inherit;
		color: #333;
		line-height: 50px;
		display: flex;
	}
.page-my {
	background-color: #F8F8F8;
	padding-top: 0;
	.top {
		background: linear-gradient(0deg,#d956a9, rgb(173, 51, 127));
			height: 320rpx;
		.bg {
			width: 100%;
			height: 320rpx;
		}
		.user-box {
			text-align: center;
			.user {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				
			}
		}
	}
	.order-container {
		border-radius: 27rpx;
		.order-tab {
			flex:1;
			.icon-tab {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 20rpx;
			}
			.icon-serve {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>

<style scoped lang="scss">
.uni-page-wrapper{
	background: #999999 !important;
}
.notice{
	line-height: 30px;
	border-top: solid 1px #e5e5e5;
	text-align: left;
}
.more{
	position: absolute;
	right: 4%;
}
.userHeader {
    position: relative;
    margin: 0px 4%;
    background: #FFFFFF;
    border-radius: 10px;
    border: solid 1px #eae6e6;
    box-shadow: 0px 0px 6px #dadada;
	padding: 0px 4%;
}

.userHeader .user_bg {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.userHeader .nav {
  height: 180upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user {
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  z-index: 200;
}
.user .nickname{
	font-size: 16px;
    color: #999;
    margin-left: 8px;
	margin-top: -30px;
  }
.user .level_name{
	  position: absolute;
	  margin-top: 15px;
	  margin-left: 70px;
	  background: #d0af2f;
	  padding: 3px;
	  border-radius: 10px;
	  font-size: 10px;
    }
.user image {
  width: 130upx;
  height: 130upx;
  border: 5upx solid #fff;
  border-radius: 50%;
}

.user text {
  font-size: 38upx;
  color: #fff;
  margin-left: 20upx;
}

.vip {
  height: 200upx;
  position: relative;
  display: flex;
  padding: 0upx 4%;
  border-radius: 16upx;
  //background-image: url(../../static/user/vip_bg.png);
  background: linear-gradient(270deg, #ccc, rgba(0,0,0,.5));
  // background-repeat: no-repeat;
  // background-size: 100%;
  margin: 20px 4%;
  overflow: hidden;
}

.banquan {
  position: absolute;
  color: #f6e5a3;
  top: 100upx;
  left: 24upx;
  font-size: 24upx;
}

.vip .vip_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.vipname {
  z-index: 5;
  display: flex;
  width: 100%;
  height: 60upx;
  position: relative;
  align-items: center;
  color: #fff;
}

.zuanshi {
  color: #f6e5a3;
  font-size: 42upx;
  line-height: 60upx;
}

.names {
  color: #FFFFFF;
  line-height: 20upx;
  font-size: 20upx;
  margin-left: 20upx;
  margin-top: 30upx;
  font-size: 18px;
}

.vip_level {
  width: 70px;
  height: 23px;
  text-align: center;
  line-height: 17px;
  font-size: 10px;
  color: #FFFFFF;
  background: linear-gradient(270deg, rgba(0,0,0,.2), #353535);
  border-radius: 10px;
  position: absolute;
  top: 11px;
  right: 5px;
  padding: 3px;
}

/* 中间菜单栏 */
.userMenu {
  margin-top: 10upx;
  padding: 0 4%;
  position: relative;
  background-color: #f8f8f8;
  padding-bottom: 10upx;
}

.userMenu .arc {
  width: 100%;
  height: 36upx;
  position: absolute;
  top: -34upx;
  left: 0;
}
.place{
	padding: 0 4%;
	position: relative;
	background-color: #f8f8f8;
	padding-bottom: 40upx;
}

		.nav {
			.nav-item {
				text-align: center;
				font-size: 20rpx;
				flex: 0 0 25%;
				margin-bottom: 30rpx;
				image {
					width: 36rpx;
					height: 36rpx;
					margin-left: 15px;
					background: #fff;
					border-radius: 50%;
					padding: 5px;
					margin-top: 5px;
				}
			}
		}
</style>